import React, { Component } from 'react';
import PropTypes from 'prop-types';
import UserList from './UserList.js'
import UserDetail from './UserDetail.js'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [
        {
          id: 0,
          name: 'zhangsan'
        },
        {
          id: 1,
          name: 'lisi'
        }
      ],
      selectId: 0
    }
    this.handleChangeId=this.handleChangeId.bind(this)
    this.handleListAdd=this.handleListAdd.bind(this)
  }

  render() {
    return (
      <div className="App">
        <UserList users={this.state.users} handleChangeId={this.handleChangeId} handleListAdd={this.handleListAdd}/>
        <UserDetail  users={this.state.users}  selectId={this.state.selectId}/>
      </div>
    );
  }

  
  handleChangeId(id) {
    this.setState({
      selectId: id
    })
  }
  
  handleListAdd(user) {
    this.setState(preState => ({
      users: [...preState.users, user]
    }))
  }
  
  getChildContext() {
    return {
      onAddUser: this.handleListAdd
    }
  }
}

App.childContextTypes = {
  onAddUser: PropTypes.func
}

export default App;
